<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <h3>计算属性</h3>

        <div id="computed-basics">
            <input type="text" v-model="firstName" placeholder="名">
            <input type="text" v-model="lastName" placeholder="姓">
            <hr>
            <!-- 从计算属性中获取全名 -->
            <p>{{ fullName }}</p>
        </div>

        <script type="text/javascript">
            const app = Vue.createApp({
                data(){
                    return {
                        firstName: '' ,
                        lastName: ''
                    }
                },
                // 为根组件定义计算属性
                computed: {
                    fullName: function(){
                        return this.firstName + '·' + this.lastName ;
                    }
                },
                // 为根组件定义方法
                methods: {
                    
                }
            });

            const vm = app.mount( '#computed-basics' );
            console.log( vm );
        </script>

        <p>
            我们可以将同样的函数定义为一个方法，而不是一个计算属性。<br>
            从最终结果来说，这两种实现方式确实是完全相同的。<br>
            然而，不同的是<b>计算属性将基于它们的响应依赖关系缓存</b>。<br>
            计算属性只会在相关响应式依赖发生改变时重新求值。
        </p>
        
    </body>
</html>